<template>
  <div
    o-Container
    style="padding: 1.2rem;box-sizing: border-box;height: 100vh;"
  >
    <div class="content_box">
      <div class="content_left_box">
        <div class="top_box">
          <div class="search_box">
            <img
              src="/static/skin/herodoo/main/platform/home/img/search.png"
              alt=""
            />
            <input
              v-model="searchValue"
              type="text"
              placeholder="请输入搜索内容"
              @keydown.enter="searchEnterKeyPress"
              @blur="searchEnterKeyPress"
            />
            <img
              src="/static/skin/herodoo/main/platform/home/img/shaixuan.png"
              alt=""
              @click="fdrawerOp()"
            />
          </div>
          <div class="button_box" v-if="hiddenButton">
            <button @click="ShowCreationDialog()">
              {{ addRightsShow ? "创作精品礼包" : "创作精品权益" }}
            </button>
          </div>
        </div>
        <div class="bottom_box">
          <div
            class="bottom_box_list"
            style="position: relative;"
            v-for="(item, index) in ownList"
            :key="item.ID"
            @mouseleave="hideMask(index)"
            @mouseenter="closeMask(index)"
            @click.stop="goDetaiks(item)"
          >
            <div class="is_enable" v-if="item.TypeID == '权益礼包'">
              {{ item.TypeID }}
            </div>
            <div class="list_top">
              <div class="list_top_img">
                <img
                  class="center-image"
                  :src="JSON.parse(item.MainPicturePath)[0].url"
                  alt=""
                />
              </div>
              <div class="list_top_text">
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.Name"
                    placement="top-start"
                  >
                    <div class="text">
                      <span class="mast_go" v-if="item.TypeID == 2"
                        >权益包</span
                      >
                      {{ item.Name }}
                    </div>
                  </el-tooltip>
                  <div>
                    <span
                      class="label"
                      v-for="(ele, index) in item.EquityFlagListName.split(',')"
                      :key="index"
                      >{{ ele }}</span
                    >
                  </div>
                </div>
                <div class="price">
                  <div class="now-price">
                    ￥
                    <div>{{ item.CostPrice }}</div>
                  </div>
                  <div class="old-price">
                    ￥
                    <div>{{ item.SalePrice }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list_bottom">
              <span
                >库存：{{
                  item.InventoryQuantity ? item.InventoryQuantity : 0
                }}
                份</span
              >
              <span
                >已售：{{ item.SoldQuantity ? item.SoldQuantity : 0 }} 份</span
              >
            </div>
            <div
              class="mask_layer"
              :class="{ show: checkedIndex == index }"
              v-if="
                octopus.passport.authorization.company == 1 &&
                  (octopus.vue.$route.path ==
                    '/MMS/AIGC/MyRights/OwnRights/List' ||
                    octopus.vue.$route.path ==
                      '/MMS/AIGC/CreationCenter/PortfolioRights/List')
              "
            >
              <img
                src="/static/skin/herodoo/main/platform/home/img/chakan.png"
                alt=""
                @click.stop="goDetaiks(item)"
              />
              <img
                src="/static/skin/herodoo/main/platform/home/img/good.png"
                alt=""
                @click.stop="goRecommend(item)"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- <Pagination></Pagination> -->
      <screenRights ref="screenRights" @searchFun="search"></screenRights>
      <creationDialog
        @createdSuccess="createdRights"
        ref="creationDialog"
        @load="reload"
      >
      </creationDialog>
      <creationEventDialog
        @createdSuccess="createdRights"
        ref="creationEventDialog"
      >
      </creationEventDialog>
      <AddOrdering ref="AddOrdering" @reload="reload"></AddOrdering>
    </div>
    <!-- 分页 -->
    <Pagination :pageData="rightPageData.pageData" @jump="jump"></Pagination>
    <RecommendedSetting ref="RecommendedSetting"></RecommendedSetting>
  </div>
</template>

<script>
import screenRights from "../../Components/screenRights.vue";
import creationDialog from "../../MyRightsComponents/creationDialog.vue";
import creationEventDialog from "../../MyRightsComponents/creationEventDialog.vue";
import Pagination from "../../Components/pagination.vue";
import AddOrdering from "../../MyRightsComponents/addOrdering.vue";
import RecommendedSetting from "../RecommendedSetting.vue";
export default {
  name:
    "admin_Dashboard" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  components: {
    Pagination,
    screenRights,
    creationDialog,
    creationEventDialog,
    AddOrdering,
    RecommendedSetting
  },
  data() {
    return {
      isMaskVisible: false,
      checkedIndex: -1,
      octopus: this.$parent.octopus,
      // 创建权益时判断是否为组合权益
      addRightsShow: false,
      // 已购权益和收藏库隐藏掉创作权益按钮
      hiddenButton: true,
      // 自有权益列表数据
      ownList: [],
      // 筛选内容
      searchValue: "",
      // 权益标签
      labelID: [],
      // 权益类型
      typeID: [],
      // 价格
      priceArr: "",
      // 公司限制
      company: [],
      // 时间
      dateData: [],
      // 分页
      rightPageData: ""
    };
  },
  created() {
    this.init();
    // this.getRightsList()
  },
  activated() {
    this.getRightsList(1);
  },
  methods: {
    closeMask(index) {
      this.checkedIndex = index;
    },
    hideMask(index) {
      this.checkedIndex = -1;
    },
    goRecommend(item) {
      this.$refs.RecommendedSetting.drawerOpen(item, "UPDATE");
    },
    // 模糊查询
    searchEnterKeyPress() {
      this.getRightsList(1);
    },
    // 精细化查询
    search(labelID, typeID, priceArr, company, dateData) {
      this.labelID = labelID;
      this.typeID = typeID;
      this.priceArr = priceArr;
      this.company = company;
      this.dateData = dateData;
      this.getRightsList(1);
    },
    createdRights() {
      this.getRightsList(1);
    },
    init() {
      let url = this.octopus.vue.$route.path;
      // 创建权益时判断是否为组合权益
      if (url == "/MMS/AIGC/CreationCenter/PortfolioRights/List") {
        this.addRightsShow = true;
      } else {
        this.addRightsShow = false;
      }
      // 根据不同页面显示不同内容
      if (
        url == "/MMS/AIGC/MyRights/Purchased/List" ||
        url == "/MMS/AIGC/Collections/List"
      ) {
        this.hiddenButton = false;
      } else {
        this.hiddenButton = true;
      }
    },
    // 根据不同页面跳转详情
    goDetaiks(item) {
      let url = this.octopus.vue.$route.path;

      // 已购权益YG
      if (url == "/MMS/AIGC/MyRights/Purchased/List") {
        if (item.TypeID == 1) {
          this.octopus.router.jump(
            `/MMS/AIGC/RightsDetails/List?rightsType=YG&type=DG&rightsId=${
              item.ID
            }`
          );
        }
        if (item.TypeID == 2) {
          this.octopus.router.jump(
            `/MMS/AIGC/RightsDetails/List?rightsType=YG&type=ZH&rightsId=${
              item.ID
            }&CompanyID=${item.CompanyID}`
          );
        }
      }
      // 收藏库
      else if (url == "/MMS/AIGC/Collections/List") {
        
        if (item.TypeID == 1) {
          this.octopus.router.jump(
            `/MMS/AIGC/RightsDetails/List?rightsType=SC&type=DG&rightsId=${
              item.ID
            }`
          );
        }
        if (item.TypeID == 2) {
          this.octopus.router.jump(
            `/MMS/AIGC/RightsDetails/List?rightsType=SC&type=ZH&rightsId=${
              item.ID
            }&CompanyID=${item.CompanyID}`
          );
        }
      }
      // 组合权益
      else if (url == "/MMS/AIGC/CreationCenter/PortfolioRights/List") {
        this.octopus.router.jump(
          `/MMS/AIGC/RightsDetails/List?rightsType=LB&type=ZH&rightsId=${
            item.ID
          }&CompanyID=${item.CompanyID}`
        );
      }
      // 自有权益和权益列表ZY
      else {
        // this.octopus.router.jump('/MMS/AIGC/RightsDetails/List?refundStatus=0&&refundButton=0&priceShow=0')

        if (item.TypeID == 1) {
          this.octopus.router.jump(
            `/MMS/AIGC/RightsDetails/List?rightsType=ZY&type=DG&rightsId=${
              item.ID
            }&CompanyID=${item.CompanyID}`
          );
        }
        if (item.TypeID == 2) {
          this.octopus.router.jump(
            `/MMS/AIGC/RightsDetails/List?rightsType=ZY&type=ZH&rightsId=${
              item.ID
            }&CompanyID=${item.CompanyID}`
          );
        }
      }
    },
    fdrawerOp() {
      this.$refs.screenRights.drawerOp();
    },
    ShowCreationDialog() {
      if (this.addRightsShow) {
        this.$refs.AddOrdering.drawerOp();
      } else {
        this.$refs.creationDialog.drawerOp();
      }
    },
    addOrderingDialog() {
      this.$refs.AddOrdering.drawerOp();
    },
    // 分页切换
    jump(e) {
      this.getRightsList(e);
    },
    // 获取权益列表
    getRightsList(e) {
      // this.rightPageData = ''
      let o = this;
      // 自有权益
      if (this.octopus.vue.$route.path == "/MMS/AIGC/MyRights/OwnRights/List") {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1181,
            cellData: [
              { name: "CompanyID" }, // 权益所属公司
              {
                name: "CostPrice",
                filterKey: "BETWEEN",
                filterValue: this.priceArr
              }, // 平台价格
              { name: "CreateTime" }, // 权益创建时间
              { name: "EffectiveTime" }, // 生效时间
              {
                name: "EquityFlagList",
                filterKey: "LIKE",
                filterValue: this.labelID.join()
              }, // 权益标签
              { name: "EquityFlagListName" }, // 权益标签中文
              { name: "ExpireTime" }, // 过期时间
              { name: "ID" }, // 权益ID
              { name: "InventoryQuantity" }, // 库存数量
              { name: "MainPicturePath" }, // 主图
              {
                name: "Name",
                filterKey: "LIKE",
                filterValue: this.searchValue
              }, // 权益名称
              { name: "ProductFlagList" }, // 产品标签
              {
                name: "ProductFlagListName",
                filterKey: "IN",
                filterValue: this.typeID
              }, // 产品标签 中文
              { name: "SalePrice" }, // 市场价格
              { name: "SecondaryPicturePath" }, // 副图
              { name: "SoldQuantity" }, // 已售数量
              { name: "Status" }, // 权益状态
              {
                name: "TransferRuleID",
                filterKey: "LIKE",
                filterValue: this.company.join()
              }, // 采购公司限制
              { name: "TransferRuleIDName" }, // 采购公司限制中文
              { name: "TypeID", filterKey: "=", filterValue: 1 }, // 权益类型
              { name: "TypeIDName" } // 权益类型 （中文）
            ],
            paramData: {
              CompanyID:
                this.octopus.passport.authorization.company == 1
                  ? "NULL"
                  : this.octopus.passport.authorization.company,
              IsInventory: true
            },
            pageData: {
              rowSize: 20,
              index: e
            }
          },
          function(data) {
            if (data.status.code == 200) {
              if (o.dateData.length) {
                o.ownList = data.content.queryData.filter(
                  item =>
                    (item.EffectiveTime >= o.dateData[0] &&
                      item.ExpireTime <= o.dateData[1]) ||
                    (item.EffectiveTime <= o.dateData[0] &&
                      item.ExpireTime >= o.dateData[1])
                );
              } else {
                o.ownList = data.content.queryData;
              }
              o.rightPageData = data.content;
              o.rightPageData.pageData.listData.forEach(page => {
                if (page.type == "Home") {
                  page.index;
                  page.class = "el-icon-arrow-left";
                } else if (page.type == "Previous") {
                  page.class = "el-icon-caret-left";
                } else if (page.type == "Next") {
                  page.class = "el-icon-caret-right";
                } else if (page.type == "End") {
                  page.class = "el-icon-arrow-right";
                } else {
                  page.text = page.index;
                }
              });
            } else {
              o.octopus.tips.error(data);
            }
          }
        );
      }
      // 已购权益
      if (this.octopus.vue.$route.path == "/MMS/AIGC/MyRights/Purchased/List") {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1182,
            cellData: [
              { name: "CompanyID" }, // 公司ID
              {
                name: "CostPrice",
                filterKey: "BETWEEN",
                filterValue: this.priceArr
              }, // 平台价格
              { name: "CreateTime" }, // 创建时间
              { name: "EffectiveTime" }, // 生效时间
              {
                name: "EquityFlagList",
                filterKey: "LIKE",
                filterValue: this.labelID.join()
              }, // 权益标签
              { name: "EquityFlagListName" }, // 权益标签 中文
              { name: "ExpireTime" }, // 过期时间
              { name: "ID" }, // ID
              { name: "InventoryQuantity" }, // 库存数量
              { name: "MainPicturePath" }, // 主图
              {
                name: "Name",
                filterKey: "LIKE",
                filterValue: this.searchValue
              }, // 权益名称
              { name: "ProductFlagList" }, // 产品标签
              {
                name: "ProductFlagListName",
                filterKey: "IN",
                filterValue: this.typeID
              }, // 产品标签 中文
              { name: "SalePrice" }, // 市场价格
              { name: "SecondaryPicturePath" }, // 副图
              { name: "SoldQuantity" }, // 已售数量
              { name: "Status" }, // 权益状态
              {
                name: "TransferRuleID",
                filterKey: "LIKE",
                filterValue: this.company.join()
              }, // 采购公司限制
              { name: "TransferRuleIDName" }, // 采购公司限制中文
              { name: "TypeID" }, // 权益类型ID
              { name: "TypeIDName" } // 权益类型中文
            ],
            paramData: {
              CompanyID: this.octopus.passport.authorization.company
            },
            pageData: {
              rowSize: 20,
              index: e
            }
          },
          function(data) {
            if (data.status.code == 200) {
              if (o.dateData.length) {
                o.ownList = data.content.queryData.filter(
                  item =>
                    (item.EffectiveTime >= o.dateData[0] &&
                      item.ExpireTime <= o.dateData[1]) ||
                    (item.EffectiveTime <= o.dateData[0] &&
                      item.ExpireTime >= o.dateData[1])
                );
              } else {
                o.ownList = data.content.queryData;
              }
            } else {
              o.octopus.tips.error(data);
            }
            o.rightPageData = data.content;
            o.rightPageData.pageData.listData.forEach(page => {
              if (page.type == "Home") {
                page.index;
                page.class = "el-icon-arrow-left";
              } else if (page.type == "Previous") {
                page.class = "el-icon-caret-left";
              } else if (page.type == "Next") {
                page.class = "el-icon-caret-right";
              } else if (page.type == "End") {
                page.class = "el-icon-arrow-right";
              } else {
                page.text = page.index;
              }
            });
          }
        );
      }
      // 组合权益
      if (
        this.octopus.vue.$route.path ==
        "/MMS/AIGC/CreationCenter/PortfolioRights/List"
      ) {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1181,
            cellData: [
              { name: "CompanyID" }, // 权益所属公司
              {
                name: "CostPrice",
                filterKey: "BETWEEN",
                filterValue: this.priceArr
              }, // 平台价格
              { name: "CreateTime" }, // 权益创建时间
              { name: "EffectiveTime" }, // 生效时间
              {
                name: "EquityFlagList",
                filterKey: "LIKE",
                filterValue: this.labelID.join()
              }, // 权益标签
              { name: "EquityFlagListName" }, // 权益标签中文
              { name: "ExpireTime" }, // 过期时间
              { name: "ID" }, // 权益ID
              { name: "InventoryQuantity" }, // 库存数量
              { name: "MainPicturePath" }, // 主图
              {
                name: "Name",
                filterKey: "LIKE",
                filterValue: this.searchValue
              }, // 权益名称
              { name: "ProductFlagList" }, // 产品标签
              {
                name: "ProductFlagListName",
                filterKey: "IN",
                filterValue: this.typeID
              }, // 产品标签 中文
              { name: "SalePrice" }, // 市场价格
              { name: "SecondaryPicturePath" }, // 副图
              { name: "SoldQuantity" }, // 已售数量
              { name: "Status" }, // 权益状态
              {
                name: "TransferRuleID",
                filterKey: "LIKE",
                filterValue: this.company.join()
              }, // 采购公司限制
              { name: "TransferRuleIDName" }, // 采购公司限制中文
              { name: "TypeID", filterKey: "=", filterValue: 2 }, // 权益类型
              { name: "TypeIDName" } // 权益类型 （中文）
            ],
            paramData: {
              CompanyID:
                this.octopus.passport.authorization.company == 1
                  ? "NULL"
                  : this.octopus.passport.authorization.company,
              IsInventory: "TRUE"
            },
            pageData: {
              rowSize: 20,
              index: e
            }
          },
          function(data) {
            if (data.status.code == 200) {
              if (o.dateData.length) {
                o.ownList = data.content.queryData.filter(
                  item =>
                    (item.EffectiveTime >= o.dateData[0] &&
                      item.ExpireTime <= o.dateData[1]) ||
                    (item.EffectiveTime <= o.dateData[0] &&
                      item.ExpireTime >= o.dateData[1])
                );
              } else {
                o.ownList = data.content.queryData;
              }
            } else {
              o.octopus.tips.error(data);
            }
            o.rightPageData = data.content;
            o.rightPageData.pageData.listData.forEach(page => {
              if (page.type == "Home") {
                page.index;
                page.class = "el-icon-arrow-left";
              } else if (page.type == "Previous") {
                page.class = "el-icon-caret-left";
              } else if (page.type == "Next") {
                page.class = "el-icon-caret-right";
              } else if (page.type == "End") {
                page.class = "el-icon-arrow-right";
              } else {
                page.text = page.index;
              }
            });
          }
        );
      }
      // 收藏库
      if (this.octopus.vue.$route.path == "/MMS/AIGC/Collections/List") {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 601,
            cellData: [
              { name: "AddCount" }, // AddCount
              { name: "CompanyID" }, // 公司ID
              {
                name: "CostPrice",
                filterKey: "BETWEEN",
                filterValue: this.priceArr
              }, // 成本价
              { name: "CreateTime" }, // 收藏时间
              { name: "EffectiveTime" }, // 生效时间
              {
                name: "EquityFlagList",
                filterKey: "LIKE",
                filterValue: this.labelID.join()
              }, // 权益标签
              { name: "EquityFlagListName" }, // 权益标签
              { name: "EquityList" }, // 权益集合
              { name: "EquityServiceRate" }, // 权益服务费
              { name: "ExpireTime" }, // 过期时间
              { name: "ID" }, // ID
              { name: "Integral" }, // 让利积分
              { name: "InventoryQuantity" }, // 库存数量
              { name: "MainPicturePath" }, // 主图
              { name: "MinimumQuantity" }, // 起售数量
              {
                name: "Name",
                filterKey: "LIKE",
                filterValue: this.searchValue
              }, // 权益名称
              { name: "PlatformServiceRate" }, // 平台服务费
              { name: "ProductFlagList" }, // 产品标签
              {
                name: "ProductFlagListName",
                filterKey: "IN",
                filterValue: this.typeID
              }, // 产品标签
              { name: "ProductID" }, // 产品ID
              { name: "ProductList" }, // 产品集合
              { name: "SalePrice" }, // 销售价格
              { name: "SecondaryPicturePath" }, // 副图
              { name: "SoldQuantity" }, // 已售数量
              { name: "Status" }, // 权益状态
              {
                name: "TransferRuleID",
                filterKey: "LIKE",
                filterValue: this.company.join()
              }, // 采购限制
              { name: "TransferRuleIDName" }, // 采购限制
              { name: "TypeID" }, // 权益类型ID
              { name: "TypeIDName" }, // 类型名称
              { name: "UsersCount" } // 使用人数
            ],
            paramData: {
              CreateUserID: this.octopus.passport.id
            },
            pageData: {
              rowSize: 20,
              index: e
            }
          },
          function(data) {
            if (data.status.code == 200) {
              if (o.dateData.length) {
                o.ownList = data.content.queryData.filter(
                  item =>
                    (item.EffectiveTime >= o.dateData[0] &&
                      item.ExpireTime <= o.dateData[1]) ||
                    (item.EffectiveTime <= o.dateData[0] &&
                      item.ExpireTime >= o.dateData[1])
                );
              } else {
                o.ownList = data.content.queryData;
              }
            } else {
              o.octopus.tips.error(data);
            }
            o.rightPageData = data.content;
            o.rightPageData.pageData.listData.forEach(page => {
              if (page.type == "Home") {
                page.index;
                page.class = "el-icon-arrow-left";
              } else if (page.type == "Previous") {
                page.class = "el-icon-caret-left";
              } else if (page.type == "Next") {
                page.class = "el-icon-caret-right";
              } else if (page.type == "End") {
                page.class = "el-icon-arrow-right";
              } else {
                page.text = page.index;
              }
            });
          }
        );
      }
    },
    reload() {
      this.getRightsList(1);
    }
  }
};
</script>
<style scoped>
@import "../../../../../../static/skin/default/MMS/AIGC/css/base.css";

.content_box .bottom_box .bottom_box_list {
  height: 20vh;
}

.mask_layer {
  position: absolute;
  top: 100%;
  /* 初始时隐藏在上方 */
  left: 0;
  transition: top 0.3s ease;
  /* 添加过渡效果 */
  width: 100%;
  height: 100%;
  background-color: #0000004d;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.show {
  top: 0 !important;
  /* 显示遮罩层 */
}

.mask_layer img {
  width: 6rem;
  height: 6rem;
}

.content_left_box .bottom_box .bottom_box_list .list_top .list_top_text {
  height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content_left_box .bottom_box .bottom_box_list .list_top .list_top_text .label {
  display: inline-block;
  margin-bottom: 0.5rem;
  border: 1px solid #336df1;
  color: #336df1;
}

.bottom_box_list {
  position: relative;
}

.price {
  display: flex;
  align-items: end;
}

.price .now-price,
.price .old-price {
  display: flex;
  align-items: end;
  margin-right: 0.9rem;
}

.price .now-price div {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: bold;
}

.price .old-price {
  font-size: 1.4rem;
  color: rgba(201, 201, 201, 1);
}

.content_left_box .bottom_box .bottom_box_list .list_top .list_top_img {
  width: 12rem;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  flex-flow: 0;
  flex-shrink: 0;
}

.center-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content_left_box .bottom_box .bottom_box_list .list_bottom {
  color: rgba(130, 112, 112, 1);
  font-size: 1rem;
}

.list_bottom > span:first-child {
  margin-right: 2.6rem;
}
</style>
